<template>
    <div>
        <div class="recommend-title">热销推荐</div>
        <ul>
            <li class="item border-bottom" v-for="item of recommendList" :key="item.id">
                
                <img class="item-img" :src="item.imgUrl"/>

                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <button class="item-button">查看详情</button>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        recommendList:Array
    },
    name:'HomeRecommend'
}
</script>
<style lang="scss" scoped>
.recommend-title{
    line-height: .8rem;
    background: #eee;
    text-indent: .2rem;
    margin-top:.2rem;
}
.item{
    display: flex;
    height:1.9rem;
    overflow: hidden;
    .item-img{
        width:2.5rem;
        height:1.7rem;
        padding: .1rem;
    }
    .item-info{
        margin-top:.05rem;
        margin-left:.05rem;
        flex:1;
        min-width: 0;
        justify-content: center;
        .item-title{
            line-height:.54rem;
            font-size:.32rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .item-desc{
            line-height:.4rem ;
            color:#ccc;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .item-button{
            line-height: .55rem;
            margin-top:.20rem;
            background-color: #ff9300;
            padding: 0 .2rem;
            border-radius: .06rem;
            color: #fff;
        }
    }
}
</style>